<template>
  <view class="h-full pt-20rpx">
    <z-paging
      ref="paging"
      v-model="teamList"
      :default-page-size="limit"
      :use-page-scroll="true"
      :to-bottom-loading-more-enabled="true"
      :auto="false"
      :fixed="false"
      :min-delay="600"
      :show-loading-more-no-more-view="false"
      :refresher-enabled="false"
      :auto-hide-loading-after-first-loaded="false"
      @query="getData"
    >
      <view
        class="flex bg-white rounded-20rpx mx-25rpx px-25rpx py-18rpx mb-15rpx font-size-25rpx"
        v-for="(item, index) in teamList"
        :index="index"
      >
        <view>
          <image
            class="w-80rpx h-80rpx rounded-100"
            mode="aspectFit"
            :src="item.fans.avatar || config.custom.avatar"
            @error="item.fans.avatar = config.custom.avatar"
            lazy-load
            :lazy-load-margin="0"
          />
        </view>

        <view class="flex pt-5rpx">
          <view class="flex flex-col ml-2 w-300rpx">
            <view class="pb-8rpx">
              <text class="line-1">
                昵称：{{ item.fans.nickname || config.custom.nickname }}
                <text v-if="item.fans.username">【{{ item.fans.username }}】</text>
              </text>
            </view>
            <text class="line-1">手机：{{ item.fans.phone }}</text>
            <text class="mt-15rpx flex color-gray font-size-24rpx">
              入驻时间：{{ item.created_at.substring(0, 10) }}
            </text>
          </view>

          <view class="flex flex-col ml-45rpx w-220rpx">
            <view class="pb-8rpx">
              <text class="line-1">级别：{{ item.level_name }}</text>
            </view>
            <text class="line-1">团队：{{ item.recommend_num }}人</text>
          </view>
        </view>
      </view>

      <template #loading>
        <view class="flex items-center justify-center h-900rpx">
          <mt-logo-loading :size="88"></mt-logo-loading>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
  import MtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import emitter from '@/utils/mitt';
  import { ref, nextTick } from 'vue';
  import { getMyTeam as getDataApi } from '@/api/member';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { report } from '@/utils/exception';
  import { config } from '@/config/env';
  import type { MemberTeam } from '@/types/member';

  const limit = 20;
  const teamList = ref<MemberTeam[]>([]);
  const paging = ref();
  let total = 0;
  let key = '';

  const props = defineProps({
    layer: {
      type: Number,
      default: 1,
    },
    idx: {
      type: Number,
      default: 0,
    },
  });

  const emits = defineEmits(['changeTotal']);

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, props.layer, key)
      .then((res) => {
        paging.value.complete(res.data.list);
        if (total != res.data.pages.total) {
          total = res.data.pages.total;
          emits('changeTotal', props.idx, total);
        }
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
    // const list: any[] = [];
    // setTimeout(() => {
    //   for (let i = 0; i < 20; i++) {
    //     list.push({
    //       nickname: '老焦',
    //       avatar: '',
    //       phone: '13812345667',
    //       level_name: '联合创始人',
    //       created_at: '2020-12-09',
    //     });
    //   }
    //   paging.value.complete(list);
    // }, 1000);
  };

  onReachBottom(() => {
    paging.value.doLoadMore();
  });

  onLoad((option: any) => {
    nextTick(() => {
      paging.value.reload();
    });
  });

  //接收传值
  emitter.on('searchMember', (val: any) => {
    if (props.idx != val[0]) return;
    key = val[1];
    paging.value?.reload();
  });
</script>
